<template>
  <div class="mark-buts">
    <button id="mark-buts-1" @click="customShape1">矩形</button>
    <button id="mark-buts-2" @click="customShape2">多边形</button>
    <button id="mark-buts-3" @click="customShape3">圆形</button>
    <button id="mark-buts-4" @click="customShape4">线</button>
    <button id="mark-buts-5" @click="showModalEcho">获取结果</button>
  </div>
  <div id="container"></div>
  <EchoModal ref="echoModalInstance"></EchoModal>
</template>

<script setup>
import {onMounted, useTemplateRef} from 'vue'
// import banner from './assets/微信图片_20250330151805.jpg'
import banner from './assets/微信图片_20250330153208.jpg'
// import banner from './assets/wallhaven-gpeme3.jpg'
import {mapImageLayer} from "./map-methods/map-image-layer.js";
import {mapMark} from "./map-methods/map-mark.js";
import EchoModal from "./components/echo-modal.vue";
import {defaultData} from "./map-methods/default-data.js";

const mars3d = window.mars3d
const Cesium = window.mars3d.Cesium

const mapInstance = {
  instance: null,
  imgLayer: null,
}

const echoModalInstance = useTemplateRef('echoModalInstance');

const {addLayer: addImageLayer} = mapImageLayer();

const {
  installMapMarkerLayer,
  getResult,
  drawEcho,
  beginRectangle,
  beginPolygon,
  beginCircle,
  beginPolyline,
} = mapMark()

const showModalEcho = async () => {
  const result = await getResult(banner);
  console.log(JSON.stringify(result.json));
  echoModalInstance.value.openModal(result.echoData);
}

const customShape1 = (event) =>{
  beginRectangle(event,(type, shape, state, props)=>{
    console.log('触发时机类型',type);
    console.log(shape);   //  图形对象
    console.log(state);   //  可根据图形对象修改存储数据
    console.log(props);   // 初始化的配置项
  })
}

const customShape2 = (event) =>{
  beginPolygon(event,(type, shape, state, props)=>{
    console.log('触发时机类型',type);
    console.log(shape);   //  图形对象
    console.log(state);   //  可根据图形对象修改存储数据
    console.log(props);   // 初始化的配置项
  })
}

const customShape3 = (event) =>{
  beginCircle(event,(type, shape, state, props)=>{
    console.log('触发时机类型',type);
    console.log(shape);   //  图形对象
    console.log(state);   //  可根据图形对象修改存储数据
    console.log(props);   // 初始化的配置项
  })
}

const customShape4 = (event) =>{
  beginPolyline(event,(type, shape, state, props)=>{
    console.log('触发时机类型',type);
    console.log(shape);   //  图形对象
    console.log(state);   //  可根据图形对象修改存储数据
    console.log(props);   // 初始化的配置项
  })
}

const initMap = async () => {
  const config = {
    basemaps: [{name: "天地图", type: "tdt", layer: "img_d", show: true, opacity: 0}],
    scene: {
      center: {lat: 33.597401, lng: 119.031399},
      showSun: false,
      showMoon: false,
      showSkyBox: false,
      showSkyAtmosphere: false,
      fog: false,
      backgroundColor: "rgba(0,0,0,0)",
      backgroundImage: "url(//data.mars3d.cn/img/busines/background1.jpg)",
      orderIndependentTranslucency: false,
      contextOptions: {webgl: {antialias: mars3d.Util.isPCBroswer()}},
      globe: {
        show: true, // 必须为true才能显示影像图层
        baseColor: "#00000000", // 透明底色
      },
      clock: {
        currentTime: "2023-11-01 12:00:00" // 固定光照时间
      },
      cameraController: {
        zoomFactor: 1.5,
        minimumZoomDistance: 0.1,
        maximumZoomDistance: 200000,
        enableCollisionDetection: false // 允许进入地下
      }
    },
  }
  mapInstance.instance = new mars3d.Map("container", config)

  mapInstance.imgLayer = await addImageLayer(mapInstance.instance, {
    name: '防变形图片',
    url: banner,
    center: {lng: 119.031399, lat: 33.597401}, // 你的实际中心点
  })

  installMapMarkerLayer(mapInstance.instance, mapInstance.imgLayer, {
    shapeConfig: {
      shapeArea: true,
      polylineLength: true,
    }
  });
  drawEcho(defaultData)
}
onMounted(() => {
  initMap()
})
</script>

<style scoped>
#container {
  width: 100vw;
  height: 100vh;
}

.mark-buts {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 99;
  background: rgb(0, 0, 0, .1);
  padding: 10px 0;
}

.mark-buts button {
  outline: none;
  border: none;
  width: 140px;
  height: 32px;
  background: #1677ff;
  color: #fff;
  border-radius: 6px;
}

.mark-buts button + button {
  margin-left: 20px;
}
</style>
<style>
body {
  width: 100vw;
  overflow-x: hidden;
}

body, html {
  margin: 0;
  padding: 0;
}
</style>